Pass Through 為 PrimeVue 提供的 props 方法，目的是用來指定到 PrimeVue 元件裡的內層 DOM。

因此在 PrimeVue 設計的元件中，都會有一個 pt 的 props。

在各元件文件內提供 Pass Through 的說明位置：

pt 用來定義一個物件，物件內容包含：

• key 屬性：對應元件內層的 DOM 元素名稱。
• value 值：DOM 元素屬性所對應的值可能為字串、物件或是函式回傳的字串或物件。若值為一個字串或由函式回傳的字串，則做為 class 的類別選擇器。

大部分的 pt 都用來作為樣式上的設定或為自定義使用。其中，class 及 style 可接受的內容根據 Vue 綁定方法如陣列、物件或條件式判斷。

以下範例使用 Panel 元件嘗試採用 tailwindCSS 樣式進行調整，：

1. 在 header 上設定 id、style、class 三種屬性，使用函式回傳的方式，參數為 PrimeVue Panel 元件提供的 options，判斷該 Panel 是否為收合狀態，並提供不同樣式顯示。
2. title 直接設定一字串 text-xl，作為類別套用到 title 上。
3. content 為 Panel 的內容，提供一個物件設定 class 的樣式套用到 content 的文字上。

<template>
  <main class="p-6">
    <Panel header="Header" toggleable
        :pt="{
            header: (options) => ({
		            // options 提供 d_collapsed 判斷該 Panel 是否為收合狀態(state)
                id: 'panelHeader',
                style: {
                    'user-select': 'none'
                },
                class: [
                    'border-rose-100',
                    {
                        'bg-rose-400 text-rose-100': options.state.d_collapsed, // 收合
                        'text-rose-700 bg-rose-100': !options.state.d_collapsed // 展開
                    }
                ]
            }),
            title: 'text-xl',  
            content: { class: 'text-lg text-gray-400' },
        }"
    >
        <p class="mt-3">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.
        </p>
    </Panel>
  </main>
</template>

展開的顯示：

收合的顯示：

Declarative 聲明式

提供另一種撰寫 pt 的方式，此種方式在原件上的屬性都以 pt 作為開頭，再連接要調整的內層 DOM 名稱。

撰寫方式如下：

<Component pt:[passthrough_key]:[attribute]="value" />

以下提供另一個 Panel 的範例：

<Panel header="Header" toggleable
    :pt="{
        root: {
            class: 'border border-dashed'
        },
        header: {
            id: 'headerId',
            'data-header-info': 'headerInfo',
            class: 'text-rose-700 bg-rose-100 text-xl'
        }
    }"
>
    <p class="mt-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </p>
</Panel>

調整為聲明式寫法：

<Panel header="Header" toggleable
    pt:root:class="border border-dashed border-2"
    pt:header:id="headerId"
    pt:header:data-header-info="headerInfo"
    pt:header:class="text-rose-700 bg-rose-100 text-xl"
>
    <p class="mt-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
    </p>
</Panel>

兩種寫法出來的結果是相同的，紅框為 header 渲染後的 html 結構：

明日繼續針對 Pass Through 說明~

參考連結：https://primevue.org/passthrough/